<template>
  <a-month-picker
    v-if="disabledStartMonth"
    :disabled="readOnly"
    :disabled-date="disabledMonthBeforePicker"
    @change="handleDateChange"
    :value="momVal"
    :allowClear="allowClear"
    :getCalendarContainer="getCalendarContainer"
    :placeholder="placeholder"
  />
  <a-month-picker
  v-else-if="disabledEndMonth"
  :disabled="readOnly"
  :disabled-date="disabledMonthAfterPicker"
  @change="handleDateChange"
  :value="momVal"
  :allowClear="allowClear"
  :getCalendarContainer="getCalendarContainer"
  :placeholder="placeholder"
/>
  <a-month-picker
    v-else
    :disabled="readOnly"
    @change="handleDateChange"
    :value="momVal"
    :allowClear="allowClear"
    :getCalendarContainer="getCalendarContainer"
    :placeholder="placeholder"
    />
</template>
<script>
  import moment from 'moment'
  export default {
    name: 'JMonth',
    props: {
      placeholder:{
        type: String,
        default: '',
        required: false
      },
      value:{
        type: String,
        required: false
      },
      readOnly:{
        type: Boolean,
        required: false,
        default: false
      },
      allowClear:{
        type: Boolean,
        required: false,
        default: true
      },
      //某日期前禁选
      //用法： <j-month v-model="arrivalTime" disabledStartMonth="2022-04"></j-month>
      disabledStartMonth:{
        type:String,
        required:false,
        default:''
      },
      //某日期后禁选
      //用法： <j-month v-model="arrivalTime" disabledEndMonth="2022-04"></j-month>
      disabledEndMonth:{
        type:String,
        required:false,
        default:''
      },
      //禁选日期是否包含传入月份 默认不包含
      // （例: disabledEndMonth|disabledStartMonth传入2022-05，isContainerNowMonth为true时，只可选2022-05之前或之后的月份）
      isContainerNowMonth:{
        type:Boolean,
        required:false,
        default:false
      },
      getCalendarContainer: {
        type: Function,
        default: () => document.body
      }
    },
    data () {
      let dateStr = this.value;
      return {
        decorator:"",
        dateFormat:'YYYY-MM',
        momVal:!dateStr?null:moment(dateStr,this.dateFormat)
      }
    },
    watch: {
      value (val) {
        if(!val){
          this.momVal = null
        }else{
          this.momVal = moment(val,this.dateFormat)
        }
      }
    },
    methods: {
      moment,
      handleDateChange(mom,dateStr){
        this.$emit('change', dateStr);
      },
      disabledMonthBeforePicker(Value){
        const endValue = moment(this.disabledStartMonth)
        if (!Value || !endValue) {
          return false
        }
        if(this.isContainerNowMonth){
          return Value.valueOf() <= endValue.valueOf()
        }else{
          return Value.valueOf() < endValue.valueOf()
        }
      },
      disabledMonthAfterPicker(Value){
        const startValue = moment(this.disabledEndMonth)
        if (!Value || !startValue) {
          return false
        }
        if(this.isContainerNowMonth){
          return Value.valueOf() >= startValue.valueOf()
        }else{
          return Value.valueOf() > startValue.valueOf()
        }

      }
    },
    //2.2新增 在组件内定义 指定父组件调用时候的传值属性和事件类型 这个牛逼
    model: {
      prop: 'value',
      event: 'change'
    }
  }
</script>
